<template>
  <div class="home">
    <el-row>
        <view-top></view-top>
    </el-row>
    <!-- 轮播图 -->
    <div class="section-spacing">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item
          v-for="(novel, index) in rankingNovels.slice(0, 6)"
          :key="index"
        >
          <img
            :src="novel.cover"
            alt="图书封面"
            style="height: 100%; object-fit: cover"
            @click="jumpToBook(index)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 图书推荐榜 -->
    <div class="book-spacing">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="book-recommendation-title">图书推荐榜</span>
        </div>
        <el-row
          v-for="(group, groupIndex) in groupRankingNovels"
          :key="groupIndex"
        >
          <el-col v-for="(novel, index) in group" :key="index" :span="8">
            <el-row type="flex" justify="space-between" align="middle">
              <el-col :span="2">
                <p class="book-rank">{{groupIndex*3+(index+1)+(currentPage-1)*pageSize }}</p>
              </el-col>
              <el-col :span="8" style="text-align: left;">
                <p class="book-title" @mouseenter="titleIndex=groupIndex*3+index" @mouseleave="titleIndex=-1" @click="jumpToBook(groupIndex*3+index)" :class="{ 'active': groupIndex*3+index===titleIndex }">{{ novel.title }}</p>
                <p class="book-type">{{ novel.tags[0] }}</p>
              </el-col>
              <el-col :span="8">
                <img
                  :src="novel.cover"
                  alt="图书封面"
                  style=" height: 150px;cursor: pointer;"
                  @click="jumpToBook(groupIndex*3+index)"
                />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6,12,24,36]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rankingTotal"
      >
      </el-pagination>
    </div>

    <!-- 白金作家 -->
    <div class="book-spacing">
      <el-card class="box-card ">
        <div slot="header" class="clearfix">
          <span class="book-recommendation-title">白金作家</span>
        </div>
        <el-carousel :interval="4000" height="300px">
          <el-carousel-item
            v-for="(authors, groupIndex) in groupPlatinumAuthors"
            :key="groupIndex"
          >
            <el-col v-for="(author, index) in authors" :key="index" :span="6">
              <el-row type="flex" justify="space-between" align="middle" >
                <el-col :span="24">
                  <div @click="jumpToAuthorView(index+groupIndex*4)" style="cursor: pointer;">
                    <img
                      :src="author.avatar"
                      alt="作家头像"
                      style="height: 150px;
                      "
                    />
                    <div style=" width: 150px;
                    margin: 0 auto;
                    background: linear-gradient(180deg, #ffeed5 .12%, #fff 40.19%);
                    ">
                      <p class="author-name author-info" >{{ author.name }}</p>
                      <p class="author-honor author-info" >{{ author.honor }}</p>
                      <p class="author-masterpiece author-info">
                        代表作 {{ author.masterpiece }}
                    </p>
                    </div>
                    
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>
  </div>
</template>
<style scoped>
.author-info {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  
}
.author-masterpiece{
    padding: 0 12px;
    margin-top: 10px;
    color: rgba(0, 0, 0, .4);
    text-align: center;
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
.author-name{
    color: #000;
    text-align: center;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.author-honor{
    border: .5px solid #f6d7c3;
    background: #f8e1d2;
    color: #a24000;
    margin-top: 9px;
    width: 54px;
    text-align: center;
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    display: inline-block;
    padding: 2px 0;
    border-radius: 4px;
}
/* 添加间距样式 */
.section-spacing {
  margin-bottom: 100px;
}
.book-spacing {
  width: 80%;
  margin: 0px auto 100px;
}
</style>

<script>
import ViewTop from './ViewTop.vue';
export default {
  components:{
    ViewTop
  },
  data() {
    return {
      rankingNovels: [
        {
          id: 1,
          rank: 1,
          title: "小说1",
          type: "玄幻",
          cover: require("../assets/logo.png"),
        },
        {
          id: 2,
          rank: 2,
          title: "小说2",
          type: "武侠",
          cover: require("../assets/logo.png"),
        },
        {
          id: 3,
          rank: 3,
          title: "小说3",
          type: "言情",
          cover: require("../assets/logo.png"),
        },
        {
          id: 4,
          rank: 4,
          title: "小说4",
          type: "科幻",
          cover: require("../assets/logo.png"),
        },
        {
          id: 5,
          rank: 5,
          title: "小说5",
          type: "悬疑",
          cover: require("../assets/logo.png"),
        },
        {
          id: 6,
          rank: 6,
          title: "小说6",
          type: "历史",
          cover: require("../assets/logo.png"),
        },
        {
          id: 7,
          rank: 7,
          title: "小说7",
          type: "奇幻",
          cover: require("../assets/logo.png"),
        },
        {
          id: 8,
          rank: 8,
          title: "小说8",
          type: "都市",
          cover: require("../assets/logo.png"),
        },
        {
          id: 9,
          rank: 9,
          title: "小说9",
          type: "军事",
          cover: require("../assets/logo.png"),
        },
        {
          id: 10,
          rank: 10,
          title: "小说10",
          type: "穿越",
          cover: "../assets/cover10.jpg",
        },
        {
          id: 11,
          rank: 11,
          title: "小说11",
          type: "网游",
          cover: "../assets/cover11.jpg",
        },
        {
          id: 12,
          rank: 12,
          title: "小说12",
          type: "修真",
          cover: "../assets/cover12.jpg",
        },
      ],
      platinumAuthors: [
        {
          avatar: require("../assets/logo.png"),
          name: "作家1",
          honor: "白金作家",
          masterpiece: "代表作1",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家2",
          honor: "白金作家",
          masterpiece: "代表作2",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家3",
          honor: "白金作家",
          masterpiece: "代表作3",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家4",
          honor: "白金作家",
          masterpiece: "代表作4",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家5",
          honor: "白金作家",
          masterpiece: "代表作5",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家6",
          honor: "白金作家",
          masterpiece: "代表作6",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家7",
          honor: "白金作家",
          masterpiece: "代表作7",
        },
        {
          avatar: require("../assets/logo.png"),
          name: "作家8",
          honor: "白金作家",
          masterpiece: "代表作8",
        },
      ],
      currentPage: 1,
      pageSize: 12,
      rankingTotal: 0,
      titleIndex:-1,
      PlatinumAuthors:[]
    };
  },
  mounted() {
    this.searchBooks();
    this.searchAuthors();
  },
  computed: {
    groupRankingNovels() {
      const start = 0;
      const end = start + this.pageSize;
      return this.rankingNovels
        .slice(start, end)
        .reduce((result, value, index, array) => {
          if (index % 3 === 0) {
            result.push(array.slice(index, index + 3));
          }
          return result;
        }, []);
    },
    groupPlatinumAuthors() {
      const start = 0;
      const end = 8;
      return this.PlatinumAuthors
        .slice(start, end)
        .reduce((result, value, index, array) => {
          if (index % 4 === 0) {
            result.push(array.slice(index, index + 4));
          }
          return result;
        }, []);
    },
  },
  methods: {

    searchBooks() {
      // 在这里实现搜索逻辑
      var that=this;
      // let url="/user/novel/page?page="+this.currentPage+"&pageSize="+this.pageSize;
      let url="/user/recommend/page?page="+this.currentPage+"&pageSize="+this.pageSize;
      this.axios({
        method: 'get',
        url:url,
        }).then(res=>{
          console.log("novels:")
          console.log(res.data.data)
          this.rankingNovels=res.data.data.records;
          this.rankingTotal=res.data.data.total;
        }).catch(err=>{
          console.log(err)
      })
    },
    searchAuthors(){
      var that=this
      this.axios({
        method: 'get',
        url:'/user/author/list',
        }).then(res=>{
          console.log("authors:")
          console.log(res.data.data)
          this.PlatinumAuthors=res.data.data;
        }).catch(err=>{
          console.log(err)
      })
    },
    jumpToAuthorView(index){
      console.log(this.PlatinumAuthors[index].id)
      this.$router.push(
        {
          path:"/authorview",
          query:{
            authorId:this.PlatinumAuthors[index].id
          }
        }
      )
    },
    jumpToBook(bookId){
      
      var that=this
      this.$router.push(
        {
          path:"/book",
          query:{
            book:JSON.stringify(that.rankingNovels[bookId])
          }
        }
      )
    },
 
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchBooks();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchBooks();
    },
  },
   
};
</script>

<style scoped>
.home {
  padding: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.search-input {
  width: 200px;
  margin-right: 10px;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.header-menu {
  border-bottom: none;
}

.book-card {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.book-info {
  margin-left: 10px;
}

/* 图书推荐榜标题样式 */
.book-recommendation-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* 图书推荐榜内容样式 */
.book-recommendation-content {
  font-size: 16px;
  color: #666;
}

/* 图书排名样式 */
.book-rank {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0,0,0,.4);
}

/* 图书标题样式 */
.book-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.book-title.active {
  color: red; /* 点击时字体颜色变为红色 */
  cursor: pointer;
}

/* 图书类型样式 */
.book-type {
  font-size: 14px;
  color: #999;
}
</style>